<template>
    <div id="homePage" @click="panelClick" v-loading="loading" element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.3)">
        <el-container>
            <el-header class="shadow-blur lines-blue">
                <div class="cu-list menu-avatar headerTitle">
                    <div class="cu-avatar leftTitle">
                        <div @click="multiClick" class="text">{{ showname }}</div>
                        <div class="middleTitle text" @click="multiClick">
                            自助报告打印系统
                        </div>
                        <div class="cu-item">
                            <div class="action text-white">
                                <div class="text-white text-right" style="font-size: 18px">
                                    <span class="margin-left-sm">{{ curDateObj.datetime }}</span>
                                    <span class="cuIcon-notice_forbid_fill text-white text-right">
                                        <span class="margin-left-sm">{{ curDateObj.time }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-header>
            <el-main>
                <div class="center" v-if="pageIndex === 'first'">
                    <div class="SonButtomBox">
                        <div class="imgBox">
                            <img src="@/assets/images/ssreport/yisheng.png" alt="" class="no-pointer-event" />
                        </div>
                    </div>
                    <div class="leftSon">
                        <div class="SonTopBox">
                            <el-input id="keyvalueRef" ref="keyvalueRef" style="width: 100%" v-model="keyvalue"
                                placeholder="请输入病历号" @keyup.enter="transpatNo(keyvalue)"
                                :disabled="pageIndex.value === 'second'">
                                <template #suffix>
                                    <div class="buttonImg" @click="deleteNumber">
                                        <img src="@/assets/images/ssreport/button.png" alt="" />
                                    </div>
                                </template>
                            </el-input>
                        </div>
                    </div>
                    <div class="rightSon">
                        <div class="buttonBox">
                            <div class="flex justify-center margin-top" style="height: 100%">
                                <div class="light radius" style="position: relative">
                                    <el-row :gutter="20" class="padding-lg" style="height: 100%">
                                        <el-col class="padding-xs numberCol" :span="8 * item.multiple"
                                            v-for="(item, index) in btnList" :key="index">
                                            <el-button ref="buttonKey" :disabled="okConfirmCount > 0" :class="item.name"
                                                class="numberKey text-xl" type="primary"
                                                :style="{ width: item.multiple === 1 ? '90%' : '95%' }"
                                                v-if="item.title !== ''" @touchend="keyboardClick(item)"
                                                @click="keyboardClick(item)">
                                                {{ item.title }}
                                            </el-button>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </div>
                        <div class="footText">技术支持: 医顺达(山东)信息技术有限公司</div>
                    </div>
                </div>
                <div v-if="pageIndex === 'second'">
                    <transition name="el-fade-in-linear">
                        <el-card class="box-card" v-if="pageIndex === 'second'">
                            <div v-if="tableData.length > 0" class="margin-top-lg"
                                style="height: calc(100%); position: relative">
                                <div class="margin-top-lg">
                                    <div>
                                        <span class="text-bold text-xs text-shadow">姓名：{{ patientInfo.value.fullName
                                        }}</span>
                                        <span class="text-bold text-xs margin-left-sm text-shadow">性别：{{
                                            patientInfo.value.sex }}</span>
                                        <span class="text-bold text-xs margin-left-sm text-shadow">年龄：{{
                                            patientInfo.value.age }}</span>
                                        <span class="text-bold text-xs margin-left-sm text-shadow">就诊编号：{{
                                            patientInfo.value.medicalRecordNo }}</span>
                                    </div>
                                    <div class="margin-top-lg">
                                        <span class="text-xs text-shadow">
                                            待打印报告：
                                            <span class="text-green">{{ tableData.filter(data => data.statusValue).length
                                            }}</span>份
                                        </span>
                                        <span class="text-xs text-shadow margin-left">
                                            未出报告：
                                            <span class="text-red">{{ tableData.filter(data => !data.statusValue).length
                                            }}</span>份
                                        </span>
                                    </div>
                                </div>
                                <div class="margin-top-xl table">
                                    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"
                                        :show-header="false" height="calc(100% - 75px)">
                                        <el-table-column label="序号" width="60" align="center">
                                            <template #default="scope">
                                                <span :class="scope.row.statusValue ? '' : 'warning-row'">{{ scope.$index +
                                                    1 }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="scheduleDate" label="日期" width="120" align="left"
                                            show-overflow-tooltip>
                                            <template #default="scope">
                                                <span :class="scope.row.statusValue ? '' : 'warning-row'">
                                                    {{ formatDateTimeStr(scope.row.scheduleDate, 'yyyy-MM-dd') }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="statusText" label="状态" width="110" align="left">
                                            <template #default="scope">
                                                <span :class="scope.row.statusValue ? 'text-green' : 'text-red'">
                                                    <i
                                                        :class="scope.row.statusValue ? 'el-icon-circle-check' : 'el-icon-warning-outline'"></i>
                                                    {{ scope.row.statusText }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="applicationItems" label="报告名称" min-width="110" align="left">
                                            <template #default="scope">
                                                <span>
                                                    {{ IsEmptyStr(scope.row.applicationItems) ? `检验报告第[${scope.$index +
                                                        1}]份` : scope.row.applicationItems }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="name" label="是否打印" width="50" align="left">
                                            <template #default="scope">
                                                <i class="el-icon-success text-green"
                                                    v-if="scope.row.printStatus === 2"></i>
                                                <i class="el-icon-loading text-orange"
                                                    v-if="scope.row.printStatus === 1"></i>
                                                <i class="el-icon-remove text-grey" v-if="scope.row.printStatus === 0"></i>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <div class="goBack">
                                    <el-button type="primary" class="bg-gradual-blue shadow text-shadow text-bold numberKey"
                                        style="width: 100%; height: 100%" @click.native="goBack">
                                        <span>返回</span>
                                    </el-button>
                                </div>
                            </div>
                            <div v-if="tableData.length <= 0" class="margin-top-lg"
                                style="height: calc(100% - 20px); position: relative">
                                <div class="margin-top-lg flex justify-center">
                                    <span class="margin-top-lg"></span>
                                    <span class="text-lg margin-top-lg text-orange text-bold"
                                        style="margin-top: 20%">查不到可打印的报告</span>
                                </div>
                                <div class="goBack">
                                    <el-button type="primary" class="bg-gradual-blue shadow text-shadow text-bold"
                                        style="width: 100%; height: 100%" @click="goBack">
                                        <span>返回</span>
                                    </el-button>
                                </div>
                            </div>
                        </el-card>
                    </transition>
                </div>
            </el-main>
        </el-container>
        <transition name="el-fade-in-linear">
            <div class="countDown" @click="printTest" v-if="!includePrint">
                <div class="bg-gradual-orange shadow round text-shadow text-bold text-center" circle
                    style="width: 100%; height: 100%">
                    <div>
                        <span class="text-lg">{{ countDown }}</span>
                        <span class="text-xs">s</span>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>
  
<script setup lang="ts">
//import { ref, reactive, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
import { ref, reactive, getCurrentInstance, onMounted, computed, watch, nextTick } from 'vue';
import { formatDateTime, IsEmpty } from '@/utils/common';
import { ElMessage, ElMessageBox } from 'element-plus';

// 在 import 之后添加自定义事件类型声明
declare global {
    interface DocumentEventMap {
        'initSystem': CustomEvent<any>;
        'loadOk': CustomEvent<any>;
        'KeyDownUp': CustomEvent<{ key: string }>;
        'keyDownUpFinish': CustomEvent<any>;
        'scanFinish': CustomEvent<{ key: string; orgId?: string }>;
        'readCradFinish': CustomEvent<{ key: string; orgId?: string }>;
        'printFinish': CustomEvent<any>;
        'transPatNoFinish': CustomEvent<{
            key: string;
            orgId?: string;
            status?: string | number
        }>;
        'printError': CustomEvent<{ key: string }>;
        'updatePrintStatus': CustomEvent<{
            key: string;
            status: string | number;
            carmid?: string
        }>;
    }
}

let { proxy }: any = getCurrentInstance();

// 变量声明
const dialogobj = ref(null);
const hosname = (window as any).hosname ?? 'XXX';
const loading = ref(false);
const isLoading = ref(false);
const drawerIsConfirmClosed = ref(false);
const pageIndex = ref('first');
const isManual = ref(false);
const drawer = ref(false);
const drawerSize = ref('60%'); // 抽屉高度
const isPrind = ref(false); // 是否为打印操作
const includePrint = ref(true); // 是否还有未打印的数据
const isClickReadCard = ref(false); // 是否已点击读卡
const readCardValue = ref('读卡'); // 读卡按钮文字
const readCardNum = 10; // 读卡倒计时时间
const direction = 'btt';
const count = ref(0);
const countDown = ref(5); // 倒计时
const sleep = ref(5); // 系统配置的倒计时
const inputClass = ref('input-top'); // 输入框类名
const curDateObj = ref({ datetime: '', time: '', AmPm: '' });
const options = { title: 'Current count: 0', class: 'modern' };
const orgId = ref('');
const carmId = ref('');
const pattype = ref<any[]>([]);
const isenablewtfilter = ref(false);
const wts = ref<any[]>([]);
const reprint = ref(false);
const days = ref(-1); // 打印多少天内的报告
const showname = ref(''); // 医院/自助机显示名称
const timer = ref<any>(null);
const keyvalue = ref('');
const patientInfo = ref({} as any);
const tableData = ref<any[]>([]);
const btnList = ref([
    { title: '1', name: 'red', color: '#e54d42', multiple: 1, key: '1' },
    { title: '2', name: 'orange', color: '#f37b1d', multiple: 1, key: '2' },
    { title: '3', name: 'yellow', color: '#fbbd08', multiple: 1, key: '3' },
    { title: '4', name: 'olive', color: '#8dc63f', multiple: 1, key: '4' },
    { title: '5', name: 'green', color: '#39b54a', multiple: 1, key: '5' },
    { title: '6', name: 'cyan', color: '#1cbbb4', multiple: 1, key: '6' },
    { title: '7', name: 'blue', color: '#0081ff', multiple: 1, key: '7' },
    { title: '8', name: 'purple', color: '#6739b6', multiple: 1, key: '8' },
    { title: '9', name: 'mauve', color: '#9c26b0', multiple: 1, key: '9' },
    { title: '0', name: 'pink', color: '#e03997', multiple: 1, key: '0' },
    { title: 'X', name: 'brown', color: '#a5673f', multiple: 1, key: 'X' },
    { title: '清空', name: 'black', color: '#333333', multiple: 1, key: 'clear' },
    { title: '确定', name: 'white', color: '#ffffff', multiple: 2, key: 'ok' },
]);
const okConfirmCount = ref(0);
const keyvalueRef = ref<HTMLInputElement>(null);
const buttonKey = ref<any>([]);

// 生命周期钩子

onMounted(async () => {
    // 初始化UI相关设置
    initializeUISettings();

    // 设置事件监听器
    setupEventListeners();

    // 初始化定时任务
    initializeTimers();
});

// 初始化UI设置
const initializeUISettings = () => {
    //toggleFullScreen();
    adjustDrawerSize();
    openInputKeyboard();
};

// 根据窗口宽度调整抽屉大小
const adjustDrawerSize = () => {
    const width = document.documentElement.clientWidth;
    drawerSize.value = width <= 1024 ? '77%' : width <= 1440 ? '71%' : drawerSize.value;
};
// 修改事件监听器注册方式
const setupEventListeners = () => {
    // 系统事件
    document.addEventListener('initSystem', handleInitSystem);
    document.addEventListener('loadOk', handleLoadOk);

    // 键盘相关事件
    document.addEventListener('KeyDownUp', (ev: CustomEvent<{ key: string }>) => {
        if (pageIndex.value === 'first') {
            keyvalue.value += ev.detail.key;
        }
    });

    document.addEventListener('keyDownUpFinish', handleKeyDownFinish);

    // 扫描/读取相关事件
    document.addEventListener('scanFinish', (ev: CustomEvent<{ key: string; orgId?: string }>) => {
        updateInputFromEvent(ev.detail);
    });

    document.addEventListener('readCradFinish', (ev: CustomEvent<{ key: string; orgId?: string }>) => {
        updateInputFromEvent(ev.detail);
    });

    // 打印相关事件
    document.addEventListener('printFinish', handlePrintFinish);

    document.addEventListener('transPatNoFinish', (ev: CustomEvent<{
        key: string;
        orgId?: string;
        status?: string | number
    }>) => {
        const { detail } = ev;
        orgId.value = detail.orgId ?? '';
        try {
            if (detail.status === '1' || detail.status === 1) {
                confirmInput(detail.key);
            } else {
                pageIndex.value = 'second';
                showCountDown();
                keyvalue.value = '';
            }
            okConfirmCount.value = 0;
        } catch (error) {
            console.error('处理transPatNoFinish事件出错:', error);
            okConfirmCount.value = 0;
        }
    });

    document.addEventListener('printError', (ev: CustomEvent<{ key: string }>) => {
        // proxy?.$message({ message: ev.detail.key, type: "error" });
    });

    document.addEventListener('updatePrintStatus', (ev: CustomEvent<{
        key: string;
        status: string | number;
        carmid?: string
    }>) => {
        try {
            const index = Number(ev.detail.key);
            const item = tableData.value[index];

            if (item) {
                item.printStatus = Number(ev.detail.status);
                if (ev.detail.carmid) {
                    updateCarmPrintStatus(item.wlId, ev.detail.carmid, true);
                }
            }
        } catch (error) {
            console.error('处理updatePrintStatus事件出错:', error);
        }
        nextTick();
    });
};

// 初始化定时器
const initializeTimers = () => {
    // 更新时间的定时器
    timer.value = setInterval(() => {
        updateDateTime();
        openInputKeyboard(); // 保持键盘打开状态
    }, 1000);

    // 初始键盘打开延迟
    setTimeout(openInputKeyboard, 1000);
};

// 更新日期时间显示
const updateDateTime = () => {
    const now = new Date();
    curDateObj.value = {
        datetime: formatDateTime(now, 'yyyy-MM-dd'),
        time: formatDateTime(now, 'hh:mm:ss'),
        AmPm: now.getHours() < 12 ? '上午' : '下午'
    };
};
// 修改事件处理函数，使用更明确的类型
const handleInitSystem = (ev: CustomEvent) => {
    showAlert(`收到initSystem事件: ${JSON.stringify(ev)}`);

    if (!ev?.detail) return;

    const { detail } = ev;
    try {
        // 更新状态值
        countDown.value = detail.sleep;
        sleep.value = detail.sleep;
        carmId.value = detail.carmid;
        pattype.value = detail.pattype ?? '';
        reprint.value = detail.reprint ?? false;
        days.value = detail.days > 0 ? detail.days : -1;
        showname.value = detail.showname ?? '';

        // 重量过滤器设置
        if (detail.isenablewtfilter && detail.wts?.length > 0) {
            isenablewtfilter.value = detail.isenablewtfilter;
            wts.value = detail.wts;
        }
    } catch (error) {
        console.error('处理initSystem事件出错:', error);
    }
};

const handleLoadOk = () => {
    openInputKeyboard();
};

const handleKeyDown = (ev: CustomEvent) => {
    if (pageIndex.value === 'first') {
        keyvalue.value += ev.detail.key;
    }
};

const handleKeyDownFinish = () => {
    if (keyvalue.value && pageIndex.value === 'first') {
        confirmInput(keyvalue.value);
    }
};

const handleScanFinish = (ev: CustomEvent) => {
    updateInputFromEvent(ev.detail);
};

const handleReadCardFinish = (ev: CustomEvent) => {
    updateInputFromEvent(ev.detail);
};


const updateInputFromEvent = (detail: { key: string; orgId?: string }) => {
    keyvalue.value = detail.key;
    orgId.value = detail.orgId ?? '';
    if (keyvalue.value) {
        confirmInput(keyvalue.value);
    }
    okConfirmCount.value = 0;
};

const handlePrintFinish = (ev: CustomEvent) => {
    showCountDown();
    okConfirmCount.value = 0;
};

const handleTransPatNoFinish = (ev: CustomEvent) => {
    const { detail } = ev;
    try {
        orgId.value = detail.orgId ?? '';
        if (detail.status === '1' || detail.status === 1) {
            confirmInput(detail.key);
        } else {
            pageIndex.value = 'second';
            showCountDown();
            keyvalue.value = '';
        }
        okConfirmCount.value = 0;
    } catch (error) {
        console.error('处理transPatNoFinish事件出错:', error);
        okConfirmCount.value = 0;
    }
};

const handlePrintError = (ev: CustomEvent) => {
    proxy?.$message({ message: ev.detail.key, type: "error" });
};

const handleUpdatePrintStatus = (ev: CustomEvent) => {
    try {
        const index = Number(ev.detail.key);
        const item = tableData.value[index];

        if (item) {
            item.printStatus = Number(ev.detail.status);
            if (ev.detail.carmid) {
                updateCarmPrintStatus(item.wlId, ev.detail.carmid, true);
            }
        }
    } catch (error) {
        console.error('处理updatePrintStatus事件出错:', error);
    }
    nextTick(); // 确保视图更新
};

// 辅助函数
const showAlert = (message: string) => {
    ElMessageBox.alert(message, '提示', { confirmButtonText: '确定' });
};

// 方法定义
const toggleFullScreen = () => {
    const elem = document.documentElement;
    if (elem.requestFullscreen) elem.requestFullscreen();
    else if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen();
    else if (elem.msRequestFullscreen) elem.msRequestFullscreen();
};

const formatDateTimeStr = (val: any, fmt: string) => {
    return formatDateTime(val, fmt);
};

const IsEmptyStr = (val: any) => {
    return IsEmpty(val);
};

// const updateCarmPrintStatus = (wlId: string, carmId: string, state: boolean) => {
//     proxy.$http.post('/api/lims/work-lists/update-carm-printed-status', {
//         wlId,
//         carMachineId: carmId,
//         printStatus: state,
//     });
// };

const updateCarmPrintStatus = (wlId, carmId, state) => {
    proxy.$http
        .post('/lab/maininfo/updateMainInfoPrintStatus', {
            id: wlId,
            carMachineId: carmId,
            printStatus: state,
        })
        .then((res: any) => { })
        .catch((err) => {
            if ((window as any).winformobj) {
                (window as any).winformobj.recordWebLogs(JSON.stringify(err));
            }
        });
};

const tableRowClassName = (data: any) => {
    return data.rowIndex % 2 === 0 ? 'odd-row' : '';
};

const clickReadCard = () => {
    isClickReadCard.value = true;
    readCardValue.value = readCardNum.toString();
    const readCardTime = setInterval(() => {
        readCardValue.value = (parseInt(readCardValue.value) - 1).toString();
        if (readCardValue.value === '0') clearDisableAboutReadCard();
    }, 1000);
    keyvalue.value = (window as any).winformobj?.readCard() || '';
};

const clearDisableAboutReadCard = () => {
    clearInterval((window as any).readCardTime);
    readCardValue.value = '读卡';
    isClickReadCard.value = false;
};

const openInputKeyboard = () => {
    inputClass.value = '';
    nextTick(() => keyvalueRef.value?.focus());
};

const drawerClosed = () => {
    if (!drawerIsConfirmClosed.value) {
        keyvalue.value = '';
        isManual.value = true;
        inputClass.value = 'input-top';
    }
};

const keyboardClick = (item: any) => {
    try {
        switch (item.key) {
            case '0': case '1': case '2': case '3': case '4':
            case '5': case '6': case '7': case '8': case '9': case 'X':
                if (keyvalue.value.length >= 30) return;
                keyvalue.value += item.key;
                break;
            case 'backspace':
                keyvalue.value = keyvalue.value.slice(0, -1);
                break;
            case 'clear':
                keyvalue.value = '';
                break;
            case 'ok':
                okConfirmCount.value++;
                if (IsEmpty(keyvalue.value)) return;
                if (keyvalue.value === '075') {
                    (window as any).winformobj?.closeApp('我要关闭你');
                    return;
                }
                if (okConfirmCount.value > 1) return;
                transpatNo(keyvalue.value);
                break;
        }
    } catch (error) { /* empty */ }
};

const transpatNo = (keyvalue: string) => {
    (window as any).winformobj?.changePatNo(keyvalue);
};

const confirmInput = (value: string) => {
    ElMessage({ message: 'kaishidiaoyong', type: 'warning' });
    clearCountDown();
    clearDisableAboutReadCard();
    inputClass.value = '';
    drawerIsConfirmClosed.value = true;
    drawer.value = false;
    loading.value = true;

    const loadingTime = setInterval(() => {
        const texts = ['加载中', '加载中.', '加载中..', '加载中...'];
        const el = document.getElementsByClassName('el-loading-text')[0];
        if (el) el.innerHTML = texts[Math.floor(Date.now() / 400) % texts.length];
    }, 400);

    const dataObj = reactive({
        medicalRecNos: [value],
        carMachieId: '',
        sqlWhere: '',
    });

    try {
        if (pattype.value.length > 0) dataObj.patTypes = [...pattype.value];
        dataObj.reprint = reprint.value;
        if (days.value > 0) {
            dataObj.beginDate = formatDateTime(
                new Date().valueOf() - days.value * 24 * 60 * 60 * 1000,
                'yyyy-MM-dd'
            );
        }
    } catch (error) { /* empty */ }

    proxy.$http.post('/api/lims/work-lists/get-work-list-reports-for-carmachine', dataObj)
        .then((res: any) => {
            pageIndex.value = 'second';
            isManual.value = false;
            loading.value = false;
            clearInterval(loadingTime);

            if (res) {
                tableData.value = res.reports;
                patientInfo.value = {
                    fullName: res.fullName,
                    sex: res.sex,
                    age: res.age,
                    medicalRecordNo: res.medicalRecordNo,
                };

                setTimeout(() => {
                    printTest(tableData.value);
                }, 1000);
            } else {
                tableData.value = [];
                patientInfo.value = {};
                showCountDown();
            }
        })
        .catch(() => {
            clearInterval(loadingTime);
            pageIndex.value = 'second';
            showCountDown();
            keyvalue.value = '';
            inputClass.value = 'input-top';
            isManual.value = false;
            loading.value = false;
            tableData.value = [];
            patientInfo.value = {};
            // proxy?.$message({ message: "暂无可打印报告", type: "warning" });
        });
};

const showCountDown = () => {
    clearCountDown();
    includePrint.value = false;
    const countTime = setInterval(() => {
        if (--countDown.value === 0) goBack();
    }, 1000);
};

const panelClick = () => {
    keyvalueRef.value?.focus();
};

const clearCountDown = () => {
    clearInterval((window as any).countTime);
    includePrint.value = true;
    countDown.value = sleep.value;
};

const printTest = (arrData: any[]) => {
    const arr1 = arrData.filter(item => item.statusValue && item.printStatus === 0).map((item, index) => ({
        key: index,
        ReportName: item.reportObjectCode,
        ReportParameters: [{ Name: 'Id', Value: item.reportId }],
        PdfPrinterSetting: { PdfPrinterCopies: 1 },
    }));

    if (arr1.length <= 0) {
        showCountDown();
        return;
    }

    const paramObj = {
        Header: { AccessToken: localStorage.getItem('token') },
        Bodys: arr1,
    };

    (window as any).winformobj?.printReports(JSON.stringify(paramObj));
    isPrind.value = true;
};

const goBack = () => {
    okConfirmCount.value = 0;
    tableData.value = [];
    keyvalue.value = '';
    isManual.value = false;
    pageIndex.value = 'first';
    inputClass.value = 'input-top';
    drawer.value = false;
    drawerIsConfirmClosed.value = false;

    clearInterval(timer.value);
    timer.value = setInterval(() => {
        curDateObj.value.datetime = formatDateTime(new Date(), 'yyyy-MM-dd');
        curDateObj.value.time = formatDateTime(new Date(), 'hh:mm:ss');
        curDateObj.value.AmPm = new Date().getHours() < 12 ? '上午' : '下午';
    }, 1000);

    clearCountDown();
};

const closeApp = () => {
    (window as any).winformobj?.closeApp('我要关闭你');
};

const clickcount = ref(0);
const lastTime = ref<number>(new Date().getTime());
const clickTimer = ref<any>(null);
const waitTime = ref(250);

// const multiClick = (event: MouseEvent) => {
//     const currentTime = new Date().getTime();
//     clickcount.value = currentTime - lastTime.value < waitTime ? clickcount.value + 1 : 1;
//     lastTime.value = currentTime;

//     clearTimeout(clickTimer.value);
//     clickTimer.value = setTimeout(() => {
//         if (clickcount.value > 4) {
//             $router?.push('/syset');
//             clickcount.value = 0;
//         }
//     }, waitTime + 10);
// };

const multiClick = (event) => {
    const currentTime = new Date().getTime();
    clickcount.value =
        currentTime - lastTime.value < waitTime.value ? clickcount.value + 1 : 1;
    lastTime.value = new Date().getTime();
    clearTimeout(clickTimer.value);
    clickTimer.value = setTimeout(() => {
        clearTimeout(clickTimer.value);
        if (clickcount.value > 4) {
            if ((window as any).winformobj) {
                (window as any).winformobj.showDevTool();
            }
            // router.push('/syset');
            clickcount.value = 0;
            lastTime.value = new Date().getTime();
            clearTimeout(clickTimer.value);
            clickTimer.value = null;
            waitTime.value = 250;
        }
    }, waitTime.value + 10);
};

const deleteNumber = () => {
    keyvalue.value = keyvalue.value.slice(0, -1);
};
</script>
  
  
<style lang="scss" scoped>
@font-face {
    font-family: "CustomFont";
    src: url("@/assets/images/ssreport/方正正粗黑_GBK.ttf");
}

.no-pointer-event {
    pointer-events: none;
}

#homePage {
    height: 100vh;
    position: relative;
    background-color: #f1f1f1;

    .text {
        font-family: "CustomFont", Arial, sans-serif;
    }

    .el-container {
        height: 100%;
    }

    .el-header {
        padding-top: 15px !important;
        height: 10% !important;
        text-align: center;
        background-image: url("@/assets/images/ssreport/bj.jpg");

        span {
            font-size: 21px !important;
        }

        .cu-item {
            width: 100%;
            height: 100%;
            font-size: 16px !important;
        }

        .cu-list.menu-avatar>.cu-item>.cu-avatar {
            height: 100%;
            width: 100% !important;
            text-align: left;
        }

        .leftTitle {
            color: #fff;
            font-weight: 500;
            margin-left: 10px;
            text-align: right;
            margin-right: 10px;
        }

        .middleTitle {
            flex-grow: 1;
            text-align: right;
            color: #fff;
            font-weight: 500;
            font-size: 2.5rem !important;
            font-family: "CustomFont", Arial, sans-serif;
        }
    }

    .el-main {
        color: #333;
        height: 90%;
        box-sizing: border-box;
        padding: 20px 20px 0 20px !important;

        .center {
            width: 100%;
            height: 100%;
            background-color: #f1f1f1;
            border-radius: 30px;
            text-align: center;
            box-sizing: border-box;

            .SonButtomBox {
                width: 100%;
                height: 30%;

                .imgTextBox {
                    font-size: 2em;
                    color: #0875fc;
                    font-weight: 400;
                }

                .imgBox {
                    height: 100%;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .leftSon {
                width: 100%;
                box-sizing: border-box;
                margin-top: 2.5%;
                margin-bottom: 2.5%;

                .SonTopBox {
                    width: 100%;
                    box-sizing: border-box;

                    ::v-deep .el-input__suffix {
                        width: 4em;
                        height: 3em;
                        top: 50%;
                        transform: translateY(-50%);
                        right: 1em;
                    }

                    .buttonImg {
                        height: 60%;
                        width: 100%;
                        margin-top: 20%;
                        display: contents;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

            .rightSon {
                width: 100%;
                height: 55%;
                box-sizing: border-box;

                .text-xl {
                    font-size: 4em;
                }

                .black {
                    font-size: 2.2em;
                }
            }

            .footText {
                height: 5% !important;
                margin-top: 10px;
                color: #c8c8c8;
                text-align: center;
                font-size: 16px !important;
            }

            .buttonBox {
                height: 90%;
                width: 100%;
                background-color: #fff;
                border-radius: 30px;

                .numberCol {
                    height: 20%;

                    // margin-bottom: 30px;
                    .numberKey {
                        height: 100% !important;
                        border-radius: 20px !important;
                        background: linear-gradient(to bottom, #045efa, #0988fd);
                        padding: 0;
                        width: 100% !important;
                        border: 0;
                    }
                }

                .el-col-16 {
                    width: 100%;

                    .numberKey {
                        background: linear-gradient(to bottom, #06916d, #2ad8ac);
                    }
                }
            }
        }

        ::v-deep .el-input {
            display: block;
            width: 100%;
            // margin-top: 80px;
            transition: margin-top 0.6s;
            transition-delay: 0.3s;

            .el-input__inner {
                // text-align: center;
                font-size: 3em;
                border: 0;
                // font-weight: 800;
                height: 10vh;
                // line-height: 3.2em;
                user-select: none !important;
                // box-shadow: 0 2px 3px rgb(0 0 0 / 15%) inset,
                //   0 0 10px rgb(44 135 219 / 30%);
                color: rgb(64, 158, 255);
                border-radius: 0.7em;
                // text-align: center;
            }
        }

        .input-top {
            margin-top: 19%;
        }

        ::v-deep .read-card {
            font-size: 1.5em;
            border-radius: 0.7em;
            height: 3.2em;
            line-height: 3.2em;
            width: 6em;
            padding: 0;
            margin-left: 16px;
        }

        ::v-deep .el-card {
            width: 100%;
            margin: 0 auto;
            margin-top: 80px;
            height: calc(100vh - 60px - 40px - 80px - 70px - 80px);
            box-sizing: border-box;
            position: relative;

            .el-card__body {
                height: 100%;
                box-sizing: border-box;
            }

            .content {
                line-height: 2em;
            }

            .table {
                height: calc(100%);
            }

            .el-table {
                .odd-row {
                    background-color: #ecf5ff;
                }

                .even-row {
                    background-color: #f0f9eb;
                }
            }

            .goBack {
                position: absolute;
                //width: 80px;
                // height: 80px;
                // top: 0.5em;
                top: -10px;
                left: 0.5em;
            }
        }
    }

    ::v-deep .el-drawer {
        background: rgba($color: #000, $alpha: 0.3);

        .el-icon-close:before {
            color: #fff;
            font-size: 2em;
        }

        .el-drawer__body {
            .el-row {
                width: 95%;
                margin: 0 auto !important;
                padding-bottom: 45px;

                .el-button {
                    margin-top: 25px;
                    box-shadow: 0 2px 3px #24619e;
                }
            }
        }
    }

    .countDown {
        position: absolute;
        width: 80px;
        height: 80px;
        line-height: 80px;
        top: 88px;
        right: 2.5em;
    }

    //   .footText {
    //     text-align: center;
    //     font-size: 21px !important;
    //     color: #c8c8c8;
    //   }
    .box-card {
        width: 65%;
    }

    @media screen and (max-width: 1440px) {
        .cu-item {
            height: 45px;
            width: 200px;
        }

        .el-header {
            padding-top: 45px;

            .action i,
            span {
                font-size: 0.8em;
            }

            .leftTitle {
                font-size: 2.5rem;
            }

            .middleTitle {
                font-size: 3rem;
            }
        }

        .el-main {

            // padding: 10px 20px;
            ::v-deep .el-input {
                // margin-top: 40px;
                transition: margin-top 0.5s;
                transition-delay: 0.2s;

                .el-input__inner {
                    font-size: 35px;
                    height: 10vh;
                    // line-height: 90px;
                    // box-shadow: 0 1px 3px rgb(0 0 0 / 15%) inset,
                    //   0 0 10px rgb(44 135 219 / 30%);
                    border-radius: 0.6em;
                }
            }

            .input-top {
                // margin-top: 19%;
            }

            ::v-deep .read-card {
                font-size: 1.3em;
                border-radius: 0.6em;
                height: 3em;
                line-height: 3em;
            }

            ::v-deep .el-card {
                margin-top: 40px;
                // height: calc(100vh - 60px - 20px - 40px - 55px - 40px - 40px);
                padding: 5px 0px;

                .margin-top-lg {
                    margin-top: 12px;
                }

                .content {
                    line-height: 2em;
                }

                span {
                    font-size: 1.2em;
                }

                .el-button {
                    font-size: 1.3em !important;
                }

                .table {
                    height: calc(100%);
                }

                .el-table {

                    td,
                    th {
                        padding: 8px 0;
                    }

                    span {
                        font-size: 1em;
                    }
                }

                .goBack {
                    // width: 75px;
                    // height: 75px;
                    left: 0;
                    top: -10px;

                    .el-button {
                        font-size: 1em;
                    }
                }
            }
        }

        .el-footer {
            height: 40px !important;
            line-height: 40px;
            font-size: 0.8em;
        }

        ::v-deep .el-drawer {
            .el-icon-close:before {
                font-size: 1.7em;
            }

            .el-drawer__body {
                .el-row {
                    padding-bottom: 25px;

                    .el-button {
                        font-size: 1.7em;
                        margin-top: 15px;
                        box-shadow: 0 1px 2px #24619e;
                    }
                }
            }
        }

        .countDown {
            width: 70px;
            height: 70px;
            line-height: 70px;
            top: 60px;

            span {
                font-size: 24px;
            }
        }
    }

    @media screen and (max-width: 1024px) {
        .cu-item {
            height: 36px;
        }

        .el-header {

            .action i,
            span {
                font-size: 0.5em;
            }
        }

        .el-main {
            ::v-deep .el-input {

                // margin-top: 20px;
                .el-input__inner {
                    font-size: 25px;
                    height: 70px;
                    line-height: 70px;
                    border-radius: 0.4em;
                    margin-top: 0;
                }
            }

            .input-top {
                // margin-top: 19%;
            }

            ::v-deep .read-card {
                font-size: 1.2em;
                border-radius: 0.4em;
                height: 2.5em;
                line-height: 2.5em;
                margin-left: 10px;
            }

            ::v-deep .el-card {
                margin-top: 20px;

                // height: calc(100vh - 60px - 20px - 20px - 42px - 20px - 30px - 100px);
                .el-card__body {
                    padding: 0;
                }

                .content {
                    line-height: 1.5em;
                }

                span {
                    font-size: 1em;
                }

                .el-button {
                    font-size: 3em !important;
                }

                .el-table {

                    td,
                    th {
                        padding: 4px 0;
                    }

                    span {
                        font-size: 0.9em;
                    }
                }

                .goBack {
                    // width: 58px;
                    // height: 58px;
                    top: -10px;

                    .el-button {
                        font-size: 1em;
                    }
                }
            }
        }

        .el-footer {
            height: 30px !important;
            line-height: 30px;
            font-size: 1em;
        }

        ::v-deep .el-drawer {
            .el-icon-close:before {
                font-size: 1.5em;
            }

            .el-drawer__body {
                .el-row {
                    padding-bottom: 20px;

                    .el-button {
                        margin-top: 10px;
                        font-size: 1.5em;
                        padding: 10px 20px;
                    }
                }
            }
        }

        .countDown {
            width: 58px;
            height: 58px;
            line-height: 58px;
            top: 55px;

            span {
                font-size: 16px;
            }
        }
    }

    @media screen and (max-width: 800px) {}

    /* 自定义滚动条样式 */
    ::v-deep.el-table__body-wrapper::-webkit-scrollbar {
        width: 18px;
        /* 滚动条宽度 */
        background-color: #f5f5f5;
        /* 背景颜色 */
    }

    ::v-deep.el-table__body-wrapper::-webkit-scrollbar-track {
        background-color: rgba($color: #000000, $alpha: 0);
        /* 滚动条轨道背景颜色 */
    }

    ::v-deep.el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #888;
        /* 滚动条滑块颜色 */
        border-radius: 6px;
        /* 滚动条滑块圆角 */
    }

    ::v-deep.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
        background-color: #555;
        /* 滚动条滑块悬停颜色 */
    }
}
</style>